<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css_盒子的外边距_margin注意事项</title>
  <style>
      .box{
          width: 300px;
          height: 300px;
      }
      /*第一种情况，发现span上下外边距不生效*/
      /*span{*/
      /*    background-color: red;*/
      /*    margin-bottom: 10px;*/
      /*    margin-right: 300px;*/
      /*    margin-left: 200px;*/
      /*}*/

      /*第二种情况，发现box2在页面上水平居中了*/
      /*.box1{*/
      /*    background-color: yellow;*/
      /*}*/
      /*.box2{*/
      /*    background-color: teal;*/
      /*    margin-left: auto;*/
      /*    margin-right: auto;*/
      /*}*/

      /*第三种情况，发现一号div元素和二号div元素进行了重叠*/
      /*.box1{*/
      /*    background-color: yellow;*/
      /*}*/
      /*.box2{*/
      /*    background-color: teal;*/
      /*    margin-top: -300px;*/
      /*}*/


  </style>
</head>
<body>
<!--
    盒子的外边距注意事项：
        1.子元素的margin,是参考父元素的content。（因为父元素的content中承装着子元素）
        2. 上margin、左margin:影响自己的位置;
           右margin、下margin：影响相邻元素的位置。
        3.块级元素、行内块元素，均可以完美的设置四个方向上的margin;但是行内元素，左右margin可以完美设置，但是上下margin设置无效。
        4.margin的值也可以是auto,如果给一个块元素设置左右margin为auto，那么这个元素在父元素中水平居中。
        5.margin的值可以为负数。


-->
    <div class="box box1">这是div一号元素</div>
    <div class="box box2">这是div二号元素</div>
    <hr>
    <span>我是一个行内元素</span>
</body>
</html>